<template>
  <div class="webfooterbox pb-20">
    <div class="web-footer flex justify-center">
      <a class="link" href="https://cn.vuejs.org/" target="_blank">
        <el-image src="https://cn.vuejs.org/logo.svg" />
        vue
      </a>
      <a class="link" href="https://element-plus.org/zh-CN/" target="_blank">
        <el-image src="https://element-plus.org/images/element-plus-logo-small.svg" />
        Element Plus
      </a>
    </div>
    <div class="copyright mt-10">
      copyright @ Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium quis nobis unde!
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'webFooter'
});
</script>

<style scoped lang="scss">
.webfooterbox {
  font-size: 14px;
  text-align: center;

  .web-footer {
    gap: 10px;

    .link {
      display: flex;
      align-items: center;
      text-decoration: none;
    }

    .el-image {
      width: 14px;
      height: 14px;
      margin-right: 4px;
    }
  }
  .copyright {
    font-size: 13px;
    color: var(--el-text-color-secondary);
  }
}
</style>
